<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div>
      <el-form class="form" ref="form" :model="form" label-width="180px">
        <el-row>
          <!-- <el-col :span="6">
                        <el-form-item label="商户名称" placeholder="请输入商户名称">
                            <el-input v-model="form.name" />
                        </el-form-item>
          </el-col>-->
          <el-col :span="5">
            <el-form-item label="持卡人姓名/企业账户名称">
              <el-input v-model="form.accountTitle" placeholder="请输入持卡人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="转账银行卡">
              <el-input v-model="form.cardNo" placeholder="请输入银行卡号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提交审核日期" width="236">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="dates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- class="alignRight" -->
          <el-col :span="7">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button
                type="primary"
                @click="handleExport"
                v-if="$store.state.user.permissionJson.indexOf('AdminLifeShopWithdrawProvider.exportShu') !=-1"
              >导出</el-button>
              <el-button type="primary" @click="handleBatchMoney">批量打款</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item,index) in tabList"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <div v-if="item.name==activeName" v-loading="tableLoading" class="listDiv">
          <el-table
            :ref="tableData"
            :data="tableData"
            style="width: 100%"
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              v-if="item.name=='toAudit'"
              :reserve-selection="true"
            />
            <el-table-column fixed type="index" label="序号" width="50" />
            <el-table-column prop="mmkCardNo" label="公司打款银行卡号" width="180px" align="center" />
            <el-table-column prop="amount" label="提现金额" align="center">
              <template slot-scope="scope">
                <span>{{ Number(scope.row.amount).toFixed(2) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" width="150px" />
            <el-table-column prop="accountType" label="账户类型" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.accountType | accountTypeList }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bankTitle" label="提现银行" width="130px" align="center" />
            <el-table-column prop="cardNo" label="提现银行卡号" width="180px" align="center" />
            <el-table-column prop="accountTitle" label="持卡人/企业账户名称" align="center" width="150px" />
            <el-table-column prop="identity" label="身份证号/社会信用代码" width="180px" align="center" />
            <el-table-column prop="phone" label="手机号" align="center" width="110px">
              <template slot-scope="scope">
                <div>{{scope.row.phone | phonereg }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="auditStatus" label="审核状态" align="center">
              <template slot-scope="scope">
                <span
                  :class="scope.row.auditStatus==0?'col_green':scope.row.auditStatus==1?'col_black':'col_red'"
                >{{ scope.row.auditStatus | checkType }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="提交审核日期" width="180px" align="center" />
            <el-table-column prop="updatedAt" label="审核通过日期" width="180px" align="center" />
            <el-table-column prop="remark" label="备注" align="center" width="100px" />
            <el-table-column prop="updatedBy" label="操作人" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.updatedBy | userinfo}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="160px">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('shopCashInfo',scope.row.recordId,scope.row.accountType,scope.row.auditStatus)"
                >查看</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="handleMoney(scope.row.recordId)"
                  v-if="scope.row.auditStatus==0"
                >打款</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="handleRejected(scope.row.recordId)"
                  v-if="scope.row.auditStatus==0 || scope.row.auditStatus==1"
                >驳回</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagesCon">
            <div>
              <el-pagination
                :current-page="form.pageNum"
                :page-sizes="page_sizes"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_totals"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 打款弹窗 -->
    <el-dialog title="打款" :visible.sync="dialogFormVisible" width="568px" @close="clear">
      <el-form ref="form1" :inline="true" :model="form1" label-width="150px" :rules="rule1">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mmkCardNo" label="打款银行卡号">
              <el-select v-model="form1.mmkCardNo" filterable @change="handleChange1">
                <el-option
                  v-for="(item,index) in cardNumList"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行名称" prop="mmkCardBankTitle">
              <el-input v-model="form1.mmkCardBankTitle" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="solid"></div>
        <el-row>
          <div v-if="form1.accountType == '对公'">
            <el-col :span="24">
              <el-form-item label="银行卡类型" prop="accountType">
                <el-input v-model="form1.accountType" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="银行卡号" prop="cardNo">
                <el-input v-model="form1.cardNo" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开户行名称" prop="bankTitle">
                <el-input v-model="form1.bankTitle" disabled />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="开户行支行" prop="branchTitle">
                <el-input v-model="form1.branchTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业账户名称" prop="accountTitle">
                <el-input v-model="form1.accountTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="法人姓名" prop="enpUser">
                <el-input v-model="form1.enpUser" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="社会信用代码" prop="identity">
                <el-input v-model="form1.identity" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提现金额" prop="amount">
                <el-input v-model="form1.amount" disabled />
              </el-form-item>
            </el-col>
          </div>
          <!--  v-if="form1.accountType == '对私'" -->
          <div v-else>
            <el-col :span="24">
              <el-form-item label="银行卡类型" prop="accountType">
                <el-input v-model="form1.accountType" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="银行卡号" prop="cardNo">
                <el-input v-model="form1.cardNo" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开户行名称" prop="bankTitle">
                <el-input v-model="form1.bankTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="持卡人" prop="accountTitle">
                <el-input v-model="form1.accountTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="身份证号" prop="identity">
                <el-input v-model="form1.identity" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form1.phone" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提现金额" prop="amount">
                <el-input v-model="form1.amount" disabled />
              </el-form-item>
            </el-col>
          </div>
          <el-button type="primary" @click="confirm('form1')">确认</el-button>
        </el-row>
        <!-- </el-row> -->
      </el-form>
    </el-dialog>
    <!-- 驳回弹窗 -->
    <el-dialog title="驳回" :visible.sync="dialogFormRejected" width="30%" @close="clearMsg">
      <el-form ref="form2" :model="form2" label-width="100px" :rules="rule2">
        <el-row>
          <!-- label="驳回审核" -->
          <el-form-item prop="radio" style="magin-left:20px">
            <el-radio label="1" v-model="form2.radio">驳回审核</el-radio>
            <!-- <span>驳回审核</span> -->
          </el-form-item>
          <el-col :span="24">
            <el-form-item label="驳回原因" prop="check_msg">
              <el-input
                v-model="form2.check_msg"
                type="textarea"
                size="small"
                :rows="4"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-button type="primary" @click="sure('form2')">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 批量打款弹窗 -->
    <el-dialog title="批量打款" :visible.sync="dialogFormMoney" width="45%" @close="clearAll">
      <el-form ref="form4" :inline="true" :model="form4" label-width="150px" :rules="rule4">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mmkCardNo" label="打款银行卡号">
              <el-select v-model="form4.mmkCardNo" filterable @change="handleChange2">
                <el-option
                  v-for="(item,index) in cardNumList"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行名称" prop="mmkCardBankTitle">
              <el-input v-model="form4.mmkCardBankTitle" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h5 class="font_18">批量打款账户</h5>
      <!-- <el-row>
      <el-col :span="24">-->
      <!-- <el-form-item width="100%"> -->
      <div v-loading="tableLoading" class="listDiv all">
        <el-table ref="tableDatas" :data="tableDatas" style="width: 100%" height="250">
          <el-table-column prop="accountType" label="账户类型" align="center">
            <!-- accountTypeList -->
            <template slot-scope="scope">
              <span>{{ scope.row.accountType | accountTypeList }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cardNo" label="银行卡号" align="center" />
          <el-table-column prop="accountTitle" label="持卡人" align="center" />
        </el-table>
        <div class="mt_20">
          <el-button type="primary" @click="sure2('form4')">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  withdrawal,
  cashExport,
  money,
  withdrawalDetail,
  rejected,
  cashSure,
  cashAll
} from "@/api/financShopCash";
import commonFn from "@/utils/common";
import filter from "@/assets/filter.js";
export default {
  name: "shopCashList",
  data() {
    return {
      form: {
        // name: "",
        accountTitle: "",
        cardNo: "",
        startTime: "",
        endTime: "",
        auditStatus: "",
        isPc: 1,
        pageNum: 1,
        pageSize: 10
      },
      dates: null,
      activeName: "all",
      tabList: [
        { label: "全部", name: "all" },
        { label: "待审核", name: "toAudit" },
        { label: "审核通过", name: "approved" },
        { label: "审核驳回", name: "reviewRejected" }
      ],
      tableLoading: true,
      flag: true,
      flag1: true,
      flag2: true,
      tableData: [],
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 60, // 总条目数
      form1: {
        mmkCardNo: "",
        mmkCardBankTitle: "",
        accountType: "",
        accountTitle: "",
        cardNo: "",
        bankTitle: "",
        branchTitle: "",
        phone: "",
        amount: "",
        identity: "",
        enpUser: ""
      }, //打款
      listData: [],
      dialogFormVisible: false,
      cardNumList: [],
      // 驳回弹窗
      dialogFormRejected: false,
      form2: {
        check_msg: "",
        rejectedId: ""
      },
      // 批量打款
      dialogFormMoney: false,
      form4: {
        mmkCardNo: "",
        mmkCardBankTitle: ""
      },
      multipleSelection: [],
      shop_ids: "",
      shopId: "",
      allId: "",
      cardNumList1: [],
      tableDatas: [],
      rule1: {
        mmkCardNo: [
          {
            required: true,
            message: "请选择打款银行卡号",
            trigger: "change"
          }
        ]
      },
      rule2: {
        radio: [
          {
            required: true,
            message: "请勾选",
            trigger: "change"
          }
        ],
        check_msg: [
          {
            required: true,
            message: "请输入驳回原因",
            trigger: "blur"
          }
        ]
      },
      rule4: {
        mmkCardNo: [
          {
            required: true,
            message: "请选择打款银行卡号",
            trigger: "change"
          }
        ]
      }
    };
  },
  filters: {
    // 审核
    checkType(e) {
      switch (e) {
        case 0:
          return "审核中";
          break;
        case 1:
          return "审核通过";
          break;
        case 2:
          return "驳回";
          break;

        default:
          // return "暂无";
          break;
      }
    },
    // 账户类型
    accountTypeList(e) {
      switch (e) {
        case 1:
          return "对公";
          break;
        case 2:
          return "对私";
          break;
        default:
          // return "暂无";
          break;
      }
    }
  },
  inject: ["reload"],
  mounted() {
    this.getList(this.form);
    this.getMoney();
  },
  methods: {
    // 路由跳转
    toRoutes(e, id, types, status) {
      const route = {
        name: e,
        query: { id: id, types: types, status: status }
      };
      this.$router.push(route);
    },
    // 打款
    getMoney() {
      money()
        .then(res => {
          if (!res.data.code) {
            let resData = res.data.data.list;
            this.listData = res.data.data.list;
            let arr = [];
            resData.forEach(e => {
              arr.push({
                title: e.mmkCardNo,
                value: e.mmkCardNo
              });
            });
            this.cardNumList = arr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 获取提现列表
    getList(e) {
      this.tableLoading = true;
      withdrawal(e)
        .then(res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data.list;
            this.page_totals = res.data.data.count;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.tableLoading = false;
          this.errorStatus(err);
        });
    },
    // 打款
    handleMoney(e) {
      this.dialogFormVisible = true;
      let datas = { id: e };
      this.shopId = e;
      withdrawalDetail(datas)
        .then(res => {
          if (res.data.code == 0) {
            let resData = res.data.data;
            this.form1.accountType =
              resData.accountType == "1" ? "对公" : "对私";
            this.form1.accountTitle = resData.accountTitle;
            this.form1.cardNo = resData.cardNo;
            this.form1.bankTitle = resData.bankTitle;
            this.form1.branchTitle = resData.branchTitle;
            this.form1.phone = resData.phone;
            this.form1.identity = resData.identity;
            this.form1.enpUser = resData.enpUser;
            this.form1.amount = resData.amount.toFixed(2);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // tab标签页
    handleClick(tab) {
      this.form.pageNum = 1;
      this.form.auditStatus = "";
      this.tableData = [];
      switch (tab.name) {
        case "all": // 全部
          this.form.auditStatus = "";
          this.getList(this.form);
          break;
        case "toAudit": // 待审核
          this.form.auditStatus = "0";
          this.getList(this.form);
          break;
        case "approved": // 审核通过
          this.form.auditStatus = "1";
          this.getList(this.form);
          break;
        case "reviewRejected": // 审核驳回
          this.form.auditStatus = "2";
          this.getList(this.form);
          break;
        default:
          break;
      }
    },
    // 打款银行卡号
    handleChange1(e) {
      this.form1.mmkCardNo = e;
      let datas = [...this.listData];

      let list = datas.find(e => {
        return e.mmkCardNo == this.form1.mmkCardNo;
      });
      this.form1.mmkCardBankTitle = list.mmkCardBankTitle;
      this.$refs.form1.clearValidate("mmkCardNo");
    },
    // 清空打款
    clear() {
      this.dialogFormVisible = false;
      this.form1 = {
        mmkCardNo: "",
        mmkCardBankTitle: "",
        accountType: "",
        accountTitle: "",
        cardNo: "",
        bankTitle: "",
        branchTitle: "",
        phone: "",
        amount: "",
        enpUser: ""
      };
      this.$refs.form1.clearValidate("mmkCardNo");
    },
    // 打款确认
    confirm(e) {
      let datas = {
        mmkCardNo: this.form1.mmkCardNo,
        mmkCardBankTitle: this.form1.mmkCardBankTitle,
        ids: [this.shopId]
      };
      this.$refs[e].validate(valid => {
        if (valid) {
          if (this.flag) {
            this.flag = false;
            cashSure(datas)
              .then(res => {
                if (res.data.code == 0) {
                  this.flag = true;
                  this.dialogFormVisible = false;
                  this.reload();
                } else {
                  this.flag = true;
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                this.flag = true;
                this.errorStatus(err);
              });
          }
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
          return false;
        }
      });
    },
    // 驳回
    handleRejected(e) {
      this.dialogFormRejected = true;
      this.form2.rejectedId = e;
    },
    clearMsg() {
      this.dialogFormRejected = false;
      this.form2 = {
        check_msg: "",
        rejectedId: ""
      };
    },
    // 驳回确定
    sure(e) {
      let datas = {
        id: this.form2.rejectedId,
        remark: this.form2.check_msg
      };
      this.$refs[e].validate(valid => {
        if (valid) {
          if (this.flag1) {
            this.flag1 = false;
            rejected(datas)
              .then(res => {
                if (res.data.code == 0) {
                  this.flag1 = true;
                  this.dialogFormRejected = false;
                  this.reload();
                } else {
                  this.flag1 = true;
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                this.flag1 = true;
                this.errorStatus(err);
              });
          }
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
          return false;
        }
      });
    },
    // 批量打款选择银行卡号
    handleChange2(e) {
      this.form4.mmkCardNo = e;
      let datas = [...this.listData];
      let list = datas.find(e => {
        return e.mmkCardNo == this.form4.mmkCardNo;
      });
      this.form4.mmkCardBankTitle = list.mmkCardBankTitle;
      this.$refs.form4.clearValidate("mmkCardNo");
    },
    // 批量打款
    handleBatchMoney() {
      this.dialogFormMoney = true;
    },
    getRowKeys(row) {
      return row.recordId;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let arr = [];
      this.multipleSelection.forEach(e => {
        arr.push(e.recordId);
      });
      // console.log("arr", arr);
      this.allId = arr;
      this.tableDatas = this.multipleSelection;
      console.log("this.allId", this.allId);
    },
    // 批量确定
    sure2(e) {
      let datas = {
        ids: this.allId,
        mmkCardNo: this.form4.mmkCardNo,
        mmkCardBankTitle: this.form4.mmkCardBankTitle
      };
      this.$refs[e].validate(valid => {
        if (valid) {
          if (this.tableDatas.length > 0 && this.flag2) {
            this.flag2 = false;
            cashSure(datas)
              .then(res => {
                if (res.data.code == 0) {
                  this.flag2 = true;
                  this.dialogFormVisible = false;
                  this.reload();
                } else {
                  this.flag2 = true;
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                this.flag2 = true;
                this.errorStatus(err);
              });
          } else {
            this.$message({
              showClose: true,
              message: "请在待审核中勾选打款账户",
              type: "error"
            });
          }
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
          return false;
        }
      });
    },
    // 批量清空
    clearAll() {
      this.dialogFormMoney = false;
      this.form4 = {
        mmkCardNo: "",
        mmkCardBankTitle: ""
      };
      this.$refs.form4.clearValidate("mmkCardNo");
    },
    // 查询
    handleSearch() {
      this.form.pageNum = 1;
      if (this.dates != null) {
        if (this.dates.length > 0) {
          this.form.startTime = this.dates[0];
          this.form.endTime = this.dates[1];
        } else {
          this.form.startTime = null;
          this.form.endTime = null;
        }
      } else {
        this.form.startTime = null;
        this.form.endTime = null;
      }
      this.getList(this.form);
    },
    // 导出
    handleExport() {
      cashExport(this.form)
        .then(res => {
          commonFn.downFile("商户提现明细", res);
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 每页显示条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style scoped>
/* .app-container {
    padding: 20px !important;
} */
.alignRight {
  width: 100%;
  text-align: right;
}
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.tex_center {
  text-align: center;
}
.mt_20 {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.font_18 {
  font-size: 18px;
  color: #333;
  font-weight: 500;
  margin: 12px 0 0;
}
.pagesCon {
  margin-top: 20px;
  text-align: right;
}
.solid {
  width: 100%;
  height: 10px;
  border: 1px solid #f4f4f4;
  background: #f4f4f4;
  margin-bottom: 20px;
}
.col_green {
  color: green;
}
.col_red {
  color: red;
}
.col_black {
  color: black;
}
.all .el-table::before {
  height: 0;
}
</style>